<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./js/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 
        .lazy修饰符：
          1.本身v-model本质是input事件（表单只要改变）就会触发
          2.当给v-model添加.lazy修饰符后，就会把本质的input事件改为change事件（表单改变并失去焦点的时候触发）

        .number修饰符
          1.本身v-model收集输入框的内容都是字符串
          2.如果添加上.number修饰符后，就会尽量把输入的内容转为数字，类似于parseFloat（但是如果真无法转数字的话，不会转为NaN，而是被迫收集字符串）

        .trim修饰符
          收集表单数据的时候去掉前后的空格
      -->
      <form action="###">
        <p>请输入用户名: <input type="text" v-model.lazy.trim="username" /></p>
        <p>请输入年龄: <input type="text" v-model="age" /></p>
        <p>你是否同意该协议 <input type="checkbox" v-model="isAgree" /></p>
        <p>
          请选择你喜欢的学科(多选)
          <input type="checkbox" value="html" v-model="like" />html
          <input type="checkbox" value="css" v-model="like" />css
          <input type="checkbox" value="js" v-model="like" />js
          <input type="checkbox" value="react" v-model="like" />react
          <input type="checkbox" value="vue" v-model="like" />vue
        </p>

        <p>
          请选择你要就业的城市
          <input type="radio" value="西安" v-model="city" />西安
          <input type="radio" value="深圳" v-model="city" />深圳
          <input type="radio" value="武汉" v-model="city" />武汉
          <input type="radio" value="杭州" v-model="city" />杭州
        </p>
        <p>
          请选择你喜欢的球队
          <select v-model="football">
            <option value="阿根廷">阿根廷</option>
            <option value="法国">法国</option>
            <option value="德国">德国</option>
            <option value="意大利">意大利</option>
            <option value="巴西">巴西</option>
            <option value="国足">国足</option>
          </select>
        </p>
        <p>
          请选择你同桌喜欢的球队
          <select v-model="footballs" multiple>
            <option value="阿根廷">阿根廷</option>
            <option value="法国">法国</option>
            <option value="德国">德国</option>
            <option value="意大利">意大利</option>
            <option value="巴西">巴西</option>
            <option value="国足">国足</option>
          </select>
        </p>
        <p>
          请发表你对国足的看法!!!
          <textarea v-model="message"></textarea>
        </p>
      </form>
    </div>
  </body>
</html>
<script>
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: '#app',
    data() {
      return {
        username: '王伟伦',
        isAgree: false,
        like: [],
        city: '',
        football: '',
        footballs: [],
        message: '菜！',
        age: 20,
      };
    },
  });
</script>
